<template>
  <div>
    <!--项目信息-->
    <div class="search" style="height: 240px">
      <span style="margin-left: 10px; font-size: large">项目信息</span>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="ruleForm.projectName"
                placeholder="请输入项目名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目类别">
              <el-input
                v-model="ruleForm.projectCategory"
                placeholder="请输入项目类别"
              ></el-input>
              <!-- <el-select
                v-model="ruleForm.projectCategory"
                placeholder="请选择项目类别"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tableData"
                  :key="item.projectId"
                  :label="item.projectCategory"
                  :value="item.projectCategory"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目阶段">
              <el-input
                v-model="ruleForm.projectPhase"
                placeholder="请输入项目阶段"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区">
              <el-input
                v-model="ruleForm.address"
                placeholder="请输入项目所在地区"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="项目总价" prop="projectTotalPrice">
              <el-input
                v-model="ruleForm.projectTotalPrice"
                placeholder="请输入项目总价"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开工日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.projectBegin"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="完工日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.projectEnd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否派工" prop="dispatch">
              <el-radio-group v-model="ruleForm.dispatch">
                <el-radio :label="1" @change="selectA">是</el-radio>
                <el-radio :label="0" @change="selectA">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="详细地址" prop="specificAddress">
              <el-input
                v-model="ruleForm.specificAddress"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="projectRemark">
              <el-input
                v-model="ruleForm.projectRemark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--项目清单-->
    <div class="search" style="margin-top: 10px">
      <span style="margin-left: 10px; font-size: large">项目清单</span>
      <el-button
        type="primary"
        plain
        @click="handleAdd"
        style="margin-left: 30px; font-size: medium"
        >新增</el-button
      >
      <!-- <el-button type="danger" plain @click="delBatch" style="font-size: medium"
        >批量删除</el-button
      > -->
      <el-divider></el-divider>

      <div class="table">
        <el-table
          :data="tableData"
          stripe border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="manifestId"
            label="序号"
            width="80"
            align="center"
            sortable
          ></el-table-column>
          <el-table-column
            prop="manifestName"
            label="清单名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="measure"
            label="计量单位"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="quantity" label="工程量"></el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            sortable
          ></el-table-column>
          <el-table-column
            prop="manifestRemark"
            label="备注"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template v-slot="scope">
              <el-button
                plain
                type="primary"
                @click="handleEdit(scope.row)"
                size="mini"
                >编辑</el-button
              >
              <el-button
                plain
                type="danger"
                size="mini"
                @click="del(scope.row.manifestId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--业主信息-->
    <div class="search" style="margin-top: 10px">
      <span style="margin-left: 10px; font-size: large">业主信息</span>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="业主名称" prop="ownerName">
              <el-input
                v-model="ruleForm.ownerName"
                placeholder="请输入业主名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" prop="ownerContact">
              <el-input
                v-model="ruleForm.ownerContact"
                placeholder="请输入业主联系方式"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="ownerRemark">
              <el-input
                v-model="ruleForm.ownerRemark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--班组信息-->
    <div class="search" style="margin-top: 10px">
      <span style="margin-left: 10px; font-size: large">班组信息</span>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="班组Id">
              <!-- <el-select
                v-model="ruleForm.teamsId"
                placeholder="请选择班级名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tableData"
                  :key="item.teamsId"
                  :label="item.teamsId"
                  :value="item.teamsId"
                >
                </el-option>
              </el-select> -->
              <el-input
                v-model="ruleForm.teamsId"
                placeholder="请输入班组Id"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="工种">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择工种"
                style="width: 100%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承包人">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择承包人"
                style="width: 100%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入联系方式"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>

        <!-- <el-row :gutter="15" style="">
          <el-col :span="6">
            <el-form-item label="参与单位" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入参与单位"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="备注" prop="teamsRemark">
              <el-input
                v-model="ruleForm.teamsRemark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
    </div>
    <!--保存与取消-->

    <div class="operation">
      <el-button type="primary" plain @click="save1" style="margin-left: 40%"
        >保存</el-button
      >
      <router-link to="department"
        ><el-button style="margin-left: 30px">取 消</el-button></router-link
      >
    </div>

    <!--项目清单新增信息弹框-->
    <el-dialog
      title="项目清单信息"
      :visible.sync="fromVisible"
      width="40%"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form
        label-width="100px"
        style="padding-right: 50px"
        :model="form"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item prop="manifestName" label="清单名称">
          <el-input v-model="form.manifestName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="measure" label="计量单位">
          <el-input v-model="form.measure" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="quantity" label="工程量">
          <el-input v-model="form.quantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="综合单价">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="manifestRemark" label="备注">
          <el-input
            type="textarea"
            :rows="5"
            v-model="form.manifestRemark"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ProjectChild",
  data() {
    return {
      props: ["projectName"],
      projectId: this.$route.query.param.projectId,
      unitId: "1",
      xianshi: this.$route.query.param.total,
      ruleForm: {
        id: this.$route.query.param.projectId,
        projectName: this.$route.query.param.projectName,
        projectCategory: this.$route.query.param.projectCategory, //项目类别
        projectPhase: this.$route.query.param.projectPhase, //项目阶段
        dispatch: this.$route.query.param.dispatch, //是否派工：0 否，1 是
        projectTotalPrice: this.$route.query.param.projectTotalPrice, //项目总价
        projectBegin: this.$route.query.param.projectBegin, //项目开始时间
        projectEnd: this.$route.query.param.projectEnd, //项目结束时间
        specificAddress: this.$route.query.param.specificAddress, //详细地址，可为空
        projectRemark: this.$route.query.param.projectRemark, //详细地址，可为空
        address: this.$route.query.param.address, //所在地区
        ownerName: this.$route.query.param.ownerName, //业主姓名
        ownerContact: this.$route.query.param.ownerContact, //业主联系方式
        ownerRemark: this.$route.query.param.ownerRemark, //业主备注
        teamsId: this.$route.query.param.teamsId, //班组id
        teamsRemark: this.$route.query.param.teamsRemark, //班组备注

        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      form: {},
      tableData: [], // 所有的数据
      pageNum: 1, // 当前的页码
      pageSize: 10, // 每页显示的个数
      total: 0,
      title: null,
      fromVisible: false,

      form: {},

      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      datalist: "",
      ids: [],
    };
  },

  created() {
    this.load();
  },
  methods: {
    // toList() {
    //   this.$router.push({
    //     name: "Project",
    //   });
    // },
    selectA() {
      console.log(this.$data.ruleForm.dispatch);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAdd() {
      // 新增数据
      // this.form = {}; // 新增数据的时候清空数据
      this.fromVisible = true; // 打开弹窗
      this.form = {};
    },
    handleEdit(row) {
      // 编辑数据
      this.form = JSON.parse(JSON.stringify(row)); // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true; // 打开弹窗
    },
    save1() {
      // this.$router.push({
      //   name: "Project",
      // });

      // this.$root.Bus.$emit('toggle', this.ruleForm)

      // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.ruleForm.projectId = this.projectId;
          this.ruleForm.unitId = this.unitId;
          console.log("kkk");
          console.log(this.projectId);
          if (this.projectId != null) {
            console.log("mmmmm");
            this.$request.put("/projects", this.ruleForm).then((res) => {
              // this.$request({
              //   url: this.form.projectId ? "/projects" : "/projects/insert",
              //   method: this.form.projectId ? "PUT" : "POST",
              //   data: this.form,
              // }).then((res) => {
              if (res.code === "200") {
                this.$message.success("保存成功");

                // this.load();
                // this.$router.push({
                //   name: "Project",
                console.log("mmmmm");
                this.$router.push({
                  name: "Project",
                });
                // });
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            console.log("hh");
            console.log(this.projectId);
            console.log(this.ruleForm);
            console.log(this.tableData);
            this.$request
              .post("/projects/insert", this.ruleForm)
              .then((res) => {
                if (res.code === "200") {
                  this.$message.error("保存失败");
                } else {
                  this.$message.success("保存成功");

                  this.$router.push({
                    name: "Project",
                  });
                }
              });
          }
        }
      });
    },
    save() {
      // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.form.projectId = this.projectId;
          this.$request({
            url: this.form.manifestId
              ? "/projects/manifest"
              : "/projects/manifest/insert",
            method: this.form.manifestId ? "PUT" : "POST",
            data: this.form,
          }).then((res) => {
            if (res.code === "200") {
              // 表示成功保存
              this.$message.success("保存成功");
              this.load();
              this.fromVisible = false;
            } else {
              this.$message.error(res.msg); // 弹出错误的信息
            }
          });
        }
      });
    },

    del(manifestId) {
      // 单个删除
      this.$confirm("您确定删除吗？", "确认删除", { type: "warning" })
        .then((response) => {
          this.$request
            .delete("/projects/manifest/" + manifestId)
            .then((res) => {
              if (res.code === "200") {
                // 表示操作成功
                this.$message.success("操作成功");
                this.load();
              } else {
                this.$message.error(res.msg); // 弹出错误的信息
              }
            });
        })
        .catch(() => {});
    },
    handleSelectionChange(rows) {
      // 当前选中的所有的行数据
      this.ids = rows.map((v) => v.id); //  [1,2]
    },
    // delBatch() {
    //   // 批量删除
    //   if (!this.ids.length) {
    //     this.$message.warning("请选择数据");
    //     return;
    //   }
    //   this.$confirm("您确定批量删除这些数据吗？", "确认删除", {
    //     type: "warning",
    //   })
    //       .then((response) => {
    //         this.$request
    //             .delete("/employee/delete/batch", { data: this.ids })
    //             .then((res) => {
    //               if (res.code === "200") {
    //                 // 表示操作成功
    //                 this.$message.success("操作成功");
    //                 this.load(1);
    //               } else {
    //                 this.$message.error(res.msg); // 弹出错误的信息
    //               }
    //             });
    //       })
    //       .catch(() => {});
    // },
    load() {
      // 分页查询

      var this_projectId = this.projectId;
      if (this.projectId) {
        this.$request.get("/projects/" + this_projectId).then((res) => {
          this.tableData = res.data?.manifestList;

          this.total = res.data?.total;
        });
        console.log(this.tableData);
      }
      // else {
      //   this.projectId = this.xianshi + 1;
      //   console.log(this.projectId);
      //   console.log(this.ruleForm);
      //   this.request.post("/projects/insert", this.ruleForm).then((res) => {
      //     if (res.code === "200") {
      //       this.$message.success("保存成功");
      //     } else {
      //       this.$message.error("保存失败");
      //     }
      //   });
      // }
    },
    reset() {
      this.title = null;
      this.load(1);
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    handleEdit1() {
      //此处为方法体
    },
  },
};
</script>

<style scoped></style>
